<template>
	<view class="content">
		<view class="content-top">
			<view class="top">
				<view class="userCard">
					<navigator class="userinfo" url="/pages/wode/userinfo" open-type="navigate">
						<image src="../../static/54665_53.gif" class="userimg"></image>
						<view class="username">
							<view>{{name}}</view>
							<view>加入同学会 一起考驾照></view>
						</view>
					</navigator>
					<image src="../../static/54665_24.gif" mode="" class="achieve"></image>
				</view>
				<view class="banner">
					<swiper :duration="1000">
						<swiper-item>
							<view class="swiper-item">

								<view class="card-title">
									<view class="left">
										<view class="title">
											<image src="../../static/8988.png" mode="" class="img"></image> 科一VIP
										</view>
										<view class="text">科一高效学，考不过补偿</view>
									</view>

									<view class="button">立即开通></view>
								</view>

								<view class="iconList">
									<view class="text">
										<image src="../../static/8988.png" mode="" class='img'></image>
										<text>精简500题</text>
									</view>
									<view class="text">
										<image src="../../static/8988.png" mode="" class='img'></image>
										<text>精简500题</text>
									</view>
									<view class="text">
										<image src="../../static/8988.png" mode="" class='img'></image>
										<text>精简500题</text>
									</view>
									<view class="text">
										<image src="../../static/8988.png" mode="" class='img'></image>
										<text>精简500题</text>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<view class="title">科二VIP</view>
								<view class="text">科一高效学，考不过补偿</view>
								<view class="button">立即开通> </view>
								<view class="iconList">
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<view class="title">科三VIP</view>
								<view class="text">科一高效学，考不过补偿</view>
								<view class="button">立即开通</view>
								<view class="iconList">
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
									<text>
										<image src="../../static/8977.png" mode=""></image> <text>精简500题</text>
									</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="selectCar">
				<view>
					切换题库：<text class="color-blue">小车</text> >
				</view>
				<view class="subject">
					<text>科一</text>
					<text>科二</text>
					<text>科三</text>
					<text>科四</text>
					<text>满分学习</text>
				</view>
				<view class="pass">
					当前科目考试通过率为<text>0</text>%
				</view>
			</view>
			<view class="score">
				<view class="score-line">
					<view class="count">
						<view class="num">1</view>
						<view>累计答题数</view>
						<view>正确率 <text class="color-blue">100%</text> </view>
					</view>
					<view class="ascore">
						<view class="num">0</view>
						<view>模拟考试平均分</view>
						<view>累计考试 <text class="color-blue">0次</text> </view>
					</view>
					<view class="vip-course">
						<view class="vip-button">VIP课程</view>
						<view>高效学习</view>
						<view>省时省力</view>
					</view>
				</view>
				<view class="share-Awards">
					<view>
						<image src="../../static/8977.png" mode="" class="img"></image>
						<text>晒出驾考成绩，赢专属奖品</text>
					</view>
					<text class="share">去分享</text>
				</view>
			</view>
		</view>
		<view class="infomercial">
			<view class="adCard">
				<view class="money">
					<view>
						<view class="right-top">
							<image src="../../static/8977.png" mode="" class="img"></image>
							<text>开通全科目高效学 </text>
						</view>
						<view class="rnm">一站式通关，考不过最高补贴140元</view>
					</view>
					<view class="circle-money">
						<view class="button">￥98开通</view>
						<view class="daily">日常购买价￥199.6</view>
					</view>
				</view>

				<view class="VIP-money">
					<view class="VIP-item">
						<view>科一VIP</view>
						<view>￥49.8</view>
					</view>
					<view class="VIP-item">
						<view>科二VIP</view>
						<view>￥49.8</view>
					</view>
					<view class="VIP-item">
						<view>科三VIP</view>
						<view>￥49.8</view>
					</view>
					<view class="VIP-item">
						<view>科四VIP</view>
						<view>￥49.8</view>
					</view>
				</view>
			</view>

		</view>
		<view class="eight-icon">
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
			<view>
				<image src="../../static/8977.png" mode="" class="img"></image>
				<view>成绩排行</view>
			</view>
		</view>
		<view class="driver-school">
			<view class="h3">我的驾校</view>
			<view class="service">
				<view class="service-left">
					<view>专属驾校服务</view>
					<view>获取驾校最新信息</view>
				</view>
				<view class="service-right">
					<view>绑定驾校</view>
				</view>
			</view>
			<view class="four-icon">
				<view>
					<image src="../../static/8977.png" mode="" class="img"></image>
					<view>帮我选驾校</view>
				</view>
				<view>
					<image src="../../static/8977.png" mode="" class="img"></image>
					<view>帮我选驾校</view>
				</view>
				<view>
					<image src="../../static/8977.png" mode="" class="img"></image>
					<view>帮我选驾校</view>
				</view>
				<view>
					<image src="../../static/8977.png" mode="" class="img"></image>
					<view>帮我选驾校</view>
				</view>
			</view>
		</view>
		<view class="banner-icon">
			<swiper :indicator-dots="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的订单</text>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
						<view>
							<image src="../../static/8977.png" mode="" class="img"></image> <text>我的课程</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import API from '../../api/index.js'

	export default {
		data() {
			return {
				id: '',
				name: '',
				userinfo: {}
			};
		},
		onLoad() {
			this.id = uni.getStorageSync('id');
			this.getWode(this.id); // 使用 this.id 作为参数
		},
		methods: {
			async getWode(id) {
				console.log(id, '用户id');
				let res = await API['wode'](id);
				console.log(res, 'wode');
				this.name = res.data.data.nickname
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		font-size: 14px;
		background-color: rgb(242, 246, 247);
	}

	.top {
		background-color: rgb(23, 28, 50);
	}

	.content-top {
		margin-bottom: 10px;
	}

	.userCard {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 10px 10px;
		color: #fff;
	}

	.userinfo {
		display: flex;
		align-items: center;
	}

	.username {
		padding-left: 10px;

	}

	.userimg {
		width: 30px;
		height: 30px;
	}

	.achieve {
		width: 30px;
		height: 30px;
	}

	.top swiper {
		width: 90%;
		margin: 0 auto;
		border-top-right-radius: 1rem;
		border-top-left-radius: 1rem;
		overflow: hidden;
	}

	.top swiper-item {
		background-color: rgb(34, 44, 80);
	}

	.top .swiper-item {
		padding: 0 10px;
	}

	.top .swiper-item .img {
		width: 20px;
		height: 20px;
		padding-right: 5px;
		display: inline-block;
		vertical-align: center;
	}

	.top .swiper-item .title {
		font-size: 20px;
		margin-top: 15px;
		color: rgb(248, 209, 166);
	}

	.top .swiper-item .text {
		color: rgb(248, 209, 166);
	}

	.top .swiper-item .card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top .swiper-item .button {
		padding: 5px 8px;
		border-radius: 2rem;
		background-color: rgb(248, 209, 166);
		color: rgb(119, 82, 66);
	}

	.iconList {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.iconList .text {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
	}

	.iconList .img {
		width: 14px;
		height: 14px;
		display: block;
		padding-bottom: 5px;
	}

	.selectCar {
		padding: 10px 10px 0;
		background-color: #fff;
	}

	.color-blue {
		color: rgb(64, 163, 216);
	}

	.subject {
		margin: 17px 0;
	}

	.subject text {
		padding: 5px;
		border: 1px solid #9A9A9C;
	}

	.subject text:hover {
		background-color: rgb(30, 172, 248);
		color: #fff;
	}

	.pass {
		padding-bottom: 5px;
	}

	.score {
		padding: 5px 10px;
		border-top: 1px solid rgb(245, 245, 245);
		background-color: #fff;
	}

	.score-line {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.num {
		font-size: 20px;
		line-height: 30px;
	}

	.vip-course {
		font-size: 12px;
	}

	.vip-button {
		padding: 5px 8px;
		color: #fff;
		background: linear-gradient(to right, rgb(65, 183, 225), rgb(70, 140, 242));
		border-radius: 1rem;
		margin-bottom: 5px;
		font-size: 14px;
	}

	.share-Awards {
		margin: 10px 0;
		padding: 8px 5px;
		background-color: rgb(232, 246, 255);
		display: flex;
		justify-content: space-between;
	}

	.share-Awards .img {
		width: 20px;
		height: 20px;
		vertical-align: bottom;
		padding-right: 3px;
	}

	.share {
		color: rgb(62, 165, 213);
	}

	.infomercial {
		padding: 10px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.adCard {
		background: linear-gradient(to right, rgb(254, 227, 135), rgb(254, 211, 98));
		border-radius: 10px;
		font-size: 12px;
		justify-content: space-between;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.money {
		display: flex;
		justify-content: space-between;
	}

	.infomercial .img {
		width: 20px;
		height: 20px;
		vertical-align: bottom;
		padding-right: 5px;
	}

	.right-top {
		padding: 5px;
		background-color: rgb(253, 156, 21);
		color: #fff;
		width: 145px;
		border-bottom-right-radius: 8px;
		font-size: 14px;
	}

	.infomercial .button {
		margin-top: 10px;
		padding: 5px;
		background-color: rgb(245, 82, 45);
		width: 60px;
		border-radius: 1rem;
		color: #fff;
		text-align: center;
	}

	.circle-money {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 10px;
	}

	.daily {
		font-size: 8px;
		text-decoration: line-through;
	}

	.rnm {
		padding-left: 10px;
	}

	.VIP-money {
		display: flex;
		justify-content: space-around;
		margin: 5px 10px 8px;
		padding: 10px;
		background: linear-gradient(to bottom, rgb(254, 253, 241), rgb(255, 242, 207));
		border-radius: 10px;
	}

	.eight-icon {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding-top: 10px;
		margin-bottom: 20px;

	}

	.eight-icon>view {
		width: 25%;
		text-align: center;
		padding-bottom: 5px;
	}

	.eight-icon .img {
		width: 20px;
		height: 20px;
		padding: 5px 0;
	}

	.driver-school {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
	}

	.driver-school .h3 {
		font-size: 18px;
	}

	.driver-school .service {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgb(246, 250, 253);
		padding: 10px 5px;
		margin: 5px 0;
	}

	.driver-school .service .service-left view:nth-last-child(1) {
		font-size: 12px;
	}

	.driver-school .service-right {
		padding: 5px 10px;
		background-color: rgb(71, 165, 254);
		border-radius: 1rem;
		color: #fff;
	}

	.four-icon {
		display: flex;
		justify-content: space-evenly;
	}

	.four-icon .img {
		width: 25px;
		height: 25px;
	}

	.four-icon>view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.banner-icon {
		background-color: #fff;
	}

	.banner-icon .img {
		width: 20px;
		height: 20px;
	}

	.banner-icon .swiper-item {
		display: flex;
		flex-wrap: wrap;
	}

	.banner-icon .swiper-item>view {
		padding-top: 10px;
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.banner-icon .swiper-item>view>text{
		line-height: 20px;
	}
</style>